<template>
  <div class="hello">
    <h1><i>东软云医院HIS系统</i></h1>
    <h2>财务管理--费用科目管理</h2><hr>
    <div>
      <el-container>
        <el-header>
          <el-row>
            <el-col :span="24"></el-col>
            <el-row>
              <el-col :span="8"><el-input v-model="input" placeholder="请输入内容"></el-input></el-col>
              <el-col :span="8"><el-button type="primary" @click="queryAll()">查询费用科目</el-button></el-col>
              <el-col :span="8"><el-button type="primary" @click="dialogVisible = true"><i class="el-icon-edit"></i>新增费用科目</el-button></el-col>
              <!-- 当dialogVisible = true，弹出窗体显示内容 -->
              <el-dialog :visible.sync="dialogVisible">
                <span>新增费用科目</span>
                <el-form :model="addExpenseClassForm">
                  <el-form-item label="科目编码" >
                    <el-input v-model="addExpenseClassForm.expCode"></el-input>
                  </el-form-item>
                </el-form>
                <el-form :model="addExpenseClassForm">
                  <el-form-item label="科目名称" >
                    <el-input v-model="addExpenseClassForm.expName"></el-input>
                  </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addNewExpenseClass()">确 定</el-button>
                </span>
              </el-dialog>
            </el-row>
          </el-row>
        </el-header>
      </el-container>
    </div>

    <div>
      <el-table :data="msg" style="width: 100%">
        <el-table-column label="科目编码" width="180">
          <template slot-scope="scope">
            <i class="el-icon-date"></i>
            <span style="margin-left: 10px">{{ scope.row.expCode }}</span>
          </template>
        </el-table-column>

        <el-table-column label="科目名称" width="180">
          <template slot-scope="scope">
            <i class="el-icon-document-add"></i>
            <span style="margin-left: 10px">{{ scope.row.expName }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope"><i class="el-icon-edit-outline"></i>
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger"@click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
    </div>

  </div>
</template>

<script>
export default{
  data(){
    return{
       input:'',
       dialogVisible:false,
       addExpenseClassForm:{
         expCode:'',
         expName:''
       },
       msg:[
         {
           expCode:'CCTV5',
           expName:'中央5体育频道'
         }
       ]
    }
  },
  methods:{
    queryAll(){
      let _this = this;
      alert("您好，欢迎进行测试！");
      this.$axios
      .get("/neuhis/expenseClass/queryAll")
      .then(response => {
        _this.msg = response.data;
      });
    },
    addNewExpenseClass(){
      let _this = this;
      alert("欢迎进入新增数据页面");
      this.$axios.
      post("/neuhis/expenseClass/addNewExpenseClass",this.addExpenseClassForm)
      .then(response => {
       console.log(response)
      });
      _this.dialogVisible = false;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
